<template>
  <div class="container">
    <h2 class="title">机场数据统计</h2>
    <div class="chart-wrapper">
      <div class="pie-chart" ref="pieChart"></div>
      <div class="bar-chart" ref="barChart"></div>
    </div>
    <div class="advice">
      <p>{{ advice }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      echartsData: {},
      advice: "",
      chartLabels: {
        '2401': '国际航班',
        '2402': '地区航班',
        '2403': '国内航班',
        '2404': '混合航班'
      },
      advices: [
        "尽量避免在旺季出行，以免人多拥挤。",
        "国际航班可能需要更多的准备时间和更严格的安全检查。",
        "国内航班通常比国际航班要快一些，但可能会有更多的飞行限制。",
        "地区航班可能会更频繁，但可能不提供所有的服务。",
        "混合航班可能提供更多的灵活性，但也可能更复杂。"
      ]
    };
  },
  mounted() {
    this.getEchartsData();
    this.getAdvice();
  },
  methods: {
    getEchartsData() {
      axios
        .get('http://localhost:9999/jam/Echarts')
        .then((response) => {
          this.echartsData = response.data.data;
          // Ensure all flight types are included in the data
          for (let code in this.chartLabels) {
            if (!(code in this.echartsData)) {
              this.echartsData[code] = 0;
            }
          }
          this.drawCharts();
        })
        .catch((error) => {
          console.error(error);
        });
    },
    drawCharts() {
      const pieChart = echarts.init(this.$refs.pieChart);
      const barChart = echarts.init(this.$refs.barChart);

      const data = Object.entries(this.echartsData).map(([key, value]) => ({
        value,
        name: this.chartLabels[key]
      }));

     const pieOption = {
       tooltip: {
         trigger: 'item',
         formatter: '{a} <br/>{b}: {c} ({d}%)'
       },
       series: [
         {
           name: '航班类型',
           type: 'pie',
           radius: ['50%', '70%'],
           data,
           label: {
             show: true,
             position: 'outside',
             formatter: '{b}: {c} ({d}%)',
             color: '#000',
             fontSize: 14
           },
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)'
             }
           }
         }
       ]
     };

   const barOption = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       }
     },
     xAxis: {
       type: 'category',
       data: data.map(item => item.name),
       axisLabel: {
         rotate: 45,
         interval: 0
       }
     },
     yAxis: {
       type: 'value'
     },
     series: [{
       data: data.map(item => item.value),
       type: 'bar'
     }]
   };


      pieChart.setOption(pieOption);
      barChart.setOption(barOption);
    },
    getAdvice() {
      this.advice = this.advices[Math.floor(Math.random() * this.advices.length)];
    }
  },
};
</script>

<style scoped>
.container {
  width: 70%;
  margin: auto;
  background: #f5f5f5;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #333;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.chart-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.pie-chart,
.bar-chart {
  flex: 1;
  height: 300px;
}

.advice {
  margin-top: 3rem;
  font-size: 1.2rem;
  color: #666;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
</style>
